<template>
    <div class="father">
        <h3>父组件</h3>
        <h4>我的车：{{ car }}</h4>
        <h4 v-if="toy">儿子给的玩具：{{ toy }}</h4>
        <!-- 传递car，和函数方法给子模块 -->
        <Child :car="car" :getToy="getToy" />
    </div>
</template>

<script setup lang="ts">
import Child from './Child.vue';
import { ref } from "vue";

const car = ref('奔驰');
const toy = ref('');
//写一个回调函数传递给子模块
function getToy(value: string) {
    toy.value = value;
}
</script>

<style scoped>
.father {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    background-color: #f9f9f9;
}
</style>
